<template>
    <div>
        <button @click="decrement">decrement</button>
        <button @click="increment">increment</button>
        <p>{{count}}</p>
        <div>{{exampleProperty}}</div>
        <div>{{myComputedProperty}}</div>
        <hr/>
        <div>
            <label>Update myWatchedProperty
                <input :value="myWatchedProperty" @input="updateMyProperty($event)"/>
            </label>
            <div>{{myWatchedPropertyStatus}}</div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue,Watch } from 'vue-property-decorator'

@Component({})
export default class Counter extends Vue {
    @Prop({default:"Input Property"})
    exampleProperty!:string

    myWatchedProperty = "Watched Property";
    myWatchedPropertyStatus = "";

    name = '';
    count = 0;
    public increment():void{
        this.count++;
    }

    public decrement():void{
        this.count--;
    }

    public get myComputedProperty(){
        return Math.random();
    }

    @Watch("myWatchedProperty")
    onMyWatchedPropertyChange(value:string,oldValue:string){
        this.myWatchedPropertyStatus = "Watched Property Changed";
    }

    updateMyProperty($event:{target:{value:string}}){
        this.myWatchedProperty = $event.target.value;
    }
}
</script>

<style scoped>

</style>
